import { useState } from 'react'
import { motion } from 'framer-motion'

interface EditableTextProps {
  initialValue: string
  onSave: (value: string) => void
  onCancel: () => void
  placeholder?: string
}

export function EditableText({ initialValue, onSave, onCancel, placeholder }: EditableTextProps) {
  const [value, setValue] = useState(initialValue)

  const handleSave = () => {
    if (value.trim()) {
      onSave(value.trim())
    }
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="space-y-4"
    >
      <textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-pink-400 resize-none"
        rows={4}
        placeholder={placeholder}
        autoFocus
      />
      <div className="flex space-x-3">
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors"
        >
          保存
        </button>
        <button
          onClick={onCancel}
          className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
        >
          取消
        </button>
      </div>
    </motion.div>
  )
}
